.box{
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    // background-color: rgb(75, 75, 75);

    border-radius: 14px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: white;
    background-repeat: no-repeat;
    background-size: 120%;
    background-position: 50% 50%;
    .tip{
        box-sizing: content-box;
        min-width: 50%;
        height: 35%;
        background-color: rgba(255, 255, 255, 0.687);
        backdrop-filter: blur(20px);
        color: black;
        // display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: -60%;
        border-radius: 6px;
        display: none;
        white-space: nowrap;
        padding: 0 5px;
        &::after{
            content: "";
            width: 0px;
            height: 0px;
            border: 5px transparent solid;
            border-top: 5px rgba(255, 255, 255, 0.687) solid;
            position: absolute;
            top: 100%;
            
        }
        
    }
    &:hover .tip{
        display: flex;
    }
}